<template>
    <div>
        <h1>显示机构信息</h1>
        机构名称 <input type="text" v-model="Page.Name">
        服务类型    <select v-model="Page.ServerId">
                            <option value="0">==请选择==</option>
                            <option v-for="a in datas" :value="a.ServerId">{{ a.ServerName }}</option>
                        </select>
                 <input type="button" value="查询" @click="Show()">      
                 <a href="https://localhost:7018/api/User/Download">导出</a> 
        <table class="table">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" v-model="selectstate" @change="ses()">
                    </th>
                    <th>机构名称</th>
                    <th>服务类型</th>
                    <th>图片</th>
                    <th>地址</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <th>
                        <input type="checkbox" v-model="idl" :value="a.Id">
                    </th>
                    <th>{{a.JoinName}}</th>
                    <th>{{a.ServerName}}</th>
                    <th>
                        <img :src="'https://localhost:7018/'+a.img" width="100" height="100" alt="">
                    </th>
                    <th>{{a.Addr}}</th>
                    <th>{{a.State?"已发布":"未发布"}}</th>
                    <th>
                        <input type="button" value="逻辑删除" @click="Del(a.Id,a.IsDel)">
                    </th>
                </tr>
            </tbody>
        </table>
        <input type="button" value="批量修改状态" @click="Stat()"> <br>
        <input type="button" value="首页" @click="Fanye(1)">
        <input type="button" value="上一页" @click="Fanye(Page.PageIndex-1)">
        <input type="button" value="下一页" @click="Fanye(Page.PageIndex+1)">
        <input type="button" value="尾页" @click="Fanye(Total.TotalPage)">
        当前{{ Page.PageIndex }}页 共{{ Total.TotalPage }}页 共{{ Total.TotalCount }}行
        页容量 <select v-model="Page.PageSize" @click="Y">
            <option value="2">==2==</option>
            <option value="3">==3==</option>
            <option value="5">==5==</option>
        </select>
        <input type="text" v-model="Page.PageIndex">
        <input type="button" value="跳转" @click="T">
    </div>
</template>

<script setup lang="ts">
    import { ref,onMounted } from 'vue';
    import axios from 'axios';
    const idl = ref([0])
    const selectstate = ref(false);
    const T =()=>{
        Show()
    }
    const Y =()=>{
        Show()
    }
    const ses=()=>{
        if(selectstate.value){
            for(var i=0;i<=data.value.length;i++){
                idl.value.push(data.value[i].Id)
            }
        }
        else{
            idl.value = [0];
        }
    }
    const Del=(vid:any,sta:any)=>{
        if(!confirm("确认删除吗...")){
            return
        }
        axios.get("https://localhost:7018/api/User/DelState",{params:{id:vid,state:sta}}).then(res=>{
            if(res.data>0){
                alert("删除成功")
                Show()
            }
            else{
                alert("删除失败")
            }
        })
    }
    const Stat=()=>{
        axios.get("https://localhost:7018/api/User/UpdateState",{params:{idlist:idl.value.toString()}}).then(res=>{
            if(res.data>0){
                alert("修改成功")
                Show()
            }
            else{
                alert("修改失败")
            }
        })
    }
    const data = ref([{
        "Id": 0,
        "JoinName": "",
        "ServerId": 0,
        "img": "",
        "Addr": "",
        "Phone": "",
        "XQ": "",
        "IsDel": true,
        "State": true,
        "ServerName": ""
    }])
    const Page = ref({
        "PageIndex":1,
        "PageSize":2,
        "Name":"",
        "ServerId":0
    })
    const Total = ref({
        "TotalPage":1,
        "TotalCount":1
    })
    const datas = ref([{
    "ServerId": 0,
    "ServerName": ""
    }])
    onMounted(()=>{
        Show()
        datatype()
    })
    const Fanye=(val:any)=>{
        if(val>=1&&val<=Total.value.TotalPage){
            Page.value.PageIndex = val
            Show()
        }
    }
    const datatype=()=>{
        axios.post("https://localhost:7018/api/User/GetServer").then(res=>{
            datas.value = res.data
        })
    }
    const Show=()=>{
        axios.get("https://localhost:7018/api/User/GetAll",{params:Page.value}).then(res=>{
            data.value = res.data.data
            Total.value.TotalCount = res.data.count
            Total.value.TotalPage = Math.ceil(Total.value.TotalCount/Page.value.PageSize)
        })
    }
</script>

<style scoped>

</style>